const pageNo = 2;
window.pageNo = pageNo

// window.addEventListener('load', function () {
//     // 执行初始化操作
//     let $musicSearchList = $('#musicSearchListPage')
//     html = `
//                 <input type="button" value="上一页" onclick="search(window.pageNo--)">
//                 <input type="button" value="下一页" onclick="search(window.pageNo++)">
//             `
//     $musicSearchList.html(html)
// });


function search(pageNo) {
    if (pageNo < 1){
        pageNo = 1;
        return;
    }
    const mes = $('#search').val()
    const type = $('#type').val();
    const $musicSearchList = $('#musicSearchList');
    const $musicSearchListPage = $('#musicSearchListPage');
    if (mes === '') {
        $musicSearchList.empty()
        $musicSearchListPage.empty()
        return
    }
    $.ajax(
        {
            url: "/music/queryMusicInfo/" + mes + "/" + type + "/" + pageNo,
            type: 'GET',
            dataType: 'json',
            success: function (response) {
                if (pageNo > response.pages){
                    pageNo = response.pages
                    return
                }
                if (response.data.length > 0) {
                    // 渲染榜单内容（示例：渲染为排行榜列表）
                    // 渲染榜单内容，先添加标题行
                    let html = `
        <div style="font-weight: bold; padding: 8px; border-bottom: 2px solid #ddd; margin-bottom: 5px;font-family:'STKaiti';">
            <span style=" width: 30px; text-align: center;">排名</span>
            <span style=" width: 200px; margin-left: 10px;">歌曲名字</span>
            <span style=" width: 150px;">歌手</span>
            <span style="margin-right: 10px;">时长</span>
            <span style="margin-right: 10px;">榜单</span>
            <span style="margin-right: 10px;">频道</span>
        </div>
        <ul style="list-style: none; padding: 0; margin: 0;">
    `;

                    response.data.forEach((item, index) => {
                        html += `
                            <li style="padding: 8px; border-bottom: 1px dashed #eee;font-family:'STKaiti';">
                                <span style="width: 30px; text-align: center; font-weight: bold;">
                                    ${item.rank}
                                </span>
                                <span style="margin-left: 10px;">
                                ${item.name}---${item.singer} ${item.time || '获取错误'} ${item.rankListName} ${item.channelName}
                                        </span>
                            </li>
                        `;
                    });
                    html += '</ul>';
                    $musicSearchList.html(html);

                    let pageInfo = `
                    <input type="button" value="上一页" class="page-btn" onclick="search(${pageNo}-1)">
                    <input type="button" value="下一页" class="page-btn" onclick="search(${pageNo}+1)">
                    <span class="page-info">
                        ${response.current}/${response.pages}
                        歌曲条目：${response.total}
                    </span>
                    
                    `
                    $musicSearchListPage.html(pageInfo);
                } else {
                    $musicSearchList.html('暂未从榜单中搜索到相关信息');
                }
            }
        }
    )
}


